<template>
	<view>
		<view class="form">
			<view class="tab">
				<view
					v-if="contentEmail"
					@click="clickTabButton('email')"
					:class="tabState == 'email'?'_for _hover':'_for'">邮箱接码</view>
				<view
					v-if="contentPhone"
					@click="clickTabButton('sms')"
					:class="tabState == 'sms'?'_for _hover':'_for'">手机号接码</view>
			</view>
			<view class="for" v-if="tabState == 'email'">
				<text class="text">邮箱验证码</text>
				<input
					v-model="contentEmail"
					type="text"
					placeholder=""
					placeholder-class="placeholder-class">
				<text class="button" @click="clickCodeButton('email')">
					{{buttonText}}
				</text>
			</view>
			<view class="for" v-if="tabState == 'sms'">
				<text class="text">手机验证码</text>
				<input
					v-model="contentPhone"
					type="text"
					placeholder=""
					placeholder-class="placeholder-class">
				<text class="button" @click="clickCodeButton('sms')">
					{{buttonText}}
				</text>
			</view>
			<view class="for">
				<text class="text">验证码</text>
				<input
					v-model="code"
					type="text"
					placeholder="请输入验证码"
					placeholder-class="placeholder-class">
			</view>
			<view class="for">
				<text class="text">原密码</text>
				<input
					v-model="originalPassword"
					type="text"
					placeholder="请输入原来的密码"
					placeholder-class="placeholder-class">
			</view>
			<view class="for">
				<text class="text">新密码</text>
				<input
					v-model="newPassword"
					type="text"
					placeholder="请输入新的密码"
					placeholder-class="placeholder-class">
			</view>
			<view
				@click="clickPasswordButton"
				class="submit-button">修改密码</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabState:"email",
				code:"",
				originalPassword:"",
				newPassword:"",
				contentEmail:false,
				contentPhone:false,
				buttonText:"获取验证码"
			}
		},
		onLoad() {
			// 获取账号基本信息
			this.getAccountDetail();
		},
		methods: {
			// 获取账号基本信息
			getAccountDetail(){
				this.$_Request(
					"GET","/api/v2/account/detail",{},
					(res) => {
						this.contentPhone = res.data.data.detail.phone;
						this.contentEmail = res.data.data.detail.email;
					}
				)
			},
			// 获取验证码
			clickCodeButton(type){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/common/send-verify-code",
					{
						"type":type,
						"useType":4,
						"templateId":5,
						"countryCode":86
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							if(this.buttonText == '获取验证码'){
								this.buttonText = 300;
								this.s = setInterval(() => {
									this.buttonText -= 1;
									if(this.buttonText == 0){
										clearInterval(this.s)
										this.buttonText = 300;
									}
								}, 1000);
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			// 点击修改密码
			clickPasswordButton(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/account/edit",
					{
						"codeType":this.tabState,
						"verifyCode":this.code,
						"currentPassword":this.$_stringToBase64(this.originalPassword),
						"newPassword":this.$_stringToBase64(this.newPassword)
					},
					(res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							uni.navigateBack();
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					}
				)
			},
			// 点击切换卡
			clickTabButton(type){
				this.tabState = type;
			},
		}
	}
</script>

<style lang="scss">
.form{
	.tab{
		display: flex;
		align-items: center;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		margin: 25rpx 25rpx 0 25rpx;
		padding: 2rpx;
		._for{
			flex: 1;
			height: 80rpx;
			background: $BeiJingSe;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
		}
		._hover{
			background: #FFF;
			color: $YuanSe;
		}
	}
	.for{
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid $BianKuangSe;
		line-height: 28rpx;
		font-size: 28rpx;
		margin: 25rpx;
		padding-bottom: 25rpx;
		.text{
			font-size: 28rpx;
			color: $ZhanWeiSe;
			margin-right: 15rpx;
		}
		input{
			flex: 1;
			font-size: 28rpx;
		}
		.placeholder-class{
			color: $ZhanWeiSe;
			font-size: 28rpx;
		}
		.button{
			margin-left: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			line-height: 22rpx;
			background: $LanSe;
			color: #FFF;
			padding: 15rpx;
			border-radius: 10rpx;
		}
	}
	.submit-button{
		width: 200rpx;
		height: 80rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		background: $LanSe;
		color: #FFF;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
}
</style>
